// 先导入变量
@use './_variables' as *;
@use './_mixins' as *;

// 布局容器
.container {
  max-width: $container-width;
  margin: 0 auto;
  padding: 0 $spacing-base;
}

// 头部布局
.header {
  height: $header-height;
  background: $background-color-white;
  box-shadow: $box-shadow-light;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: $z-index-fixed;
}

// 页脚布局
.footer {
  background: #2B2F3A;
  color: $background-color-white;
  padding: $spacing-extra-large 0;
  
  &-title {
    font-size: $font-size-large;
    margin-bottom: $spacing-base;
  }
  
  &-link {
    color: rgba($background-color-white, 0.7);
    transition: $transition-base;
    
    &:hover {
      color: $background-color-white;
    }
  }
}

// 响应式布局
@media (max-width: 1200px) {
  .container {
    max-width: 960px;
  }
}

@media (max-width: 992px) {
  .container {
    max-width: 720px;
  }
}

@media (max-width: 768px) {
  .container {
    max-width: 540px;
  }
  
  .footer {
    padding: $spacing-large 0;
  }
}

@media (max-width: 576px) {
  .container {
    max-width: none;
    padding: 0 $spacing-base;
  }
} 